<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#/a">a页面</a>
  <a href="#/b">b页面</a>
  <a href="#/c">c页面</a>
  <a href="#/d">d页面</a>
  <div id="router-view"></div>
</body>
<script>
  const routerView = document.getElementById('router-view')

  window.addEventListener('hashchange', () => {
    // http://localhost:8080/#/a
    console.log(window.location.hash)
    render(window.location.hash.split('#')[1])
  })
  render('/a  ')
  function render (type) {
    switch (type) {
      case '/a':
        routerView.innerHTML = '首页'
        break;
        case '/b':
          routerView.innerHTML = '分类'
          break;
        case '/c':
          routerView.innerHTML = '购物车'
          break
        case '/d':
          routerView.innerHTML = '我的'
          break;
      default:
        break;
    }
  }
</script>
</html>